<template>
    <div class="jd-detail">
        <Navbar title="详情页">
            <template>
                <span @click="$router.push('/')">首页</span>
            </template>
        </Navbar>
        <img :src="$img.baseUrl+detail.img">
        <div class="good" v-text="detail.name"></div>
        <span class="price" v-text="'￥'+detail.price"></span>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button @click='goToCart(detail._id)' type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
import {GoodsAction,
GoodsActionIcon,
GoodsActionButton} from 'vant'
import {Navbar} from '@/components/'
export default {
   data() {
      return {
          detail:{}
      }
   },
   created(){
       var id= this.$route.params.id
       this.$http.fetchGoodsDetail({id}).then(res=>{
           this.detail=res
       })
   },
   components:{
       [GoodsAction.name]:GoodsAction,
       [GoodsActionIcon.name]:GoodsActionIcon,
       [GoodsActionButton.name]:GoodsActionButton,
       Navbar
   },
   computed:{
   },
   methods:{
       //加入购物车
       goToCart(id){
           const token=localStorage.getItem('token')
           if(token){
               this.$http.fetchAddCarts({id}).then(()=>{
                   this.$router.push('/cart')
               })
           }else{
               this.$router.replace('/login')
           }
       }
   },
}
</script>
<style lang="scss" scoped>
.jd-detail{
    img{
        width: 9.566667rem;
        height: 8.866667rem;
        display: block;
        margin: 0 auto;
    }
    .good{
        font-size: .45rem;
        text-indent: .866667rem;
    }
    .price{
        color: red;
        font-size: .45rem;
        display: block;
        margin-top: .266667rem;
    }
}
</style>
